<template>
    <div style="padding: 20px;">
        <el-row justify='center'>
            <el-col :span="12">
                <el-table-v2 :columns="columns" :data="rowData" :width="700" :height="810" fixed
                    style="margin-left: 80px;" />
            </el-col>
            <el-col :span="12">
                <div id="water-pie" style="width: 100%; height: 780px; margin-top: 60px;"></div>
            </el-col>
        </el-row>
    </div>
</template>


<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

import * as echarts from 'echarts';

const { appContext } = getCurrentInstance();
const HOST_URL = appContext.config.globalProperties.$HOST_URL;
const props = defineProps({
    room_id: String,
    analyzed_date: String
});

let waterPercent = ref([]);

let waterPie = null;
const initChart = () => {
    waterPie = echarts.init(document.getElementById('water-pie'));
};

const columns = [
    {
        key: 'user_name', // 列的唯一标识符
        dataKey: 'user_name', // 数据源中对应的字段名
        title: '疑似水军者', // 列的标题，显示在表头
        width: 200, // 列的宽度
    },
    {
        key: 'chat_count', // 列的唯一标识符
        dataKey: 'chat_count', // 数据源中对应的字段名
        title: '聊天数量', // 列的标题，显示在表头
        width: 120, // 列的宽度
        cellClassName: 'text-center'
    },
    {
        key: 'like_count', // 列的唯一标识符
        dataKey: 'like_count', // 数据源中对应的字段名
        title: '点赞数量', // 列的标题，显示在表头
        width: 120, // 列的宽度
        cellClassName: 'text-center'
    },
    {
        key: 'enter_count', // 列的唯一标识符
        dataKey: 'enter_count', // 数据源中对应的字段名
        title: '进入次数', // 列的标题，显示在表头
        width: 120, // 列的宽度
        cellClassName: 'text-center'
    },
    {
        key: 'all_count', // 列的唯一标识符
        dataKey: 'all_count', // 数据源中对应的字段名
        title: '总互动数', // 列的标题，显示在表头
        width: 120, // 列的宽度
        cellClassName: 'text-center'
    }
]
let rowData = ref([])

const fetchRowDataList = async (roomId, roomDate) => {
    try {
        const response = await axios.get(`${HOST_URL}/chart/room/water/army_list`, { params: { room_id: roomId, analyze_time: roomDate } });
        rowData.value = response.data;
    } catch (error) {
        ElMessage.error('后端请求失败');
        console.error('请求失败:', error);
    }
};

const fetchWaterPercent = async (roomId, roomDate) => {
    try {
        const response = await axios.get(`${HOST_URL}/chart/room/water/percent_list`, { params: { room_id: roomId, analyze_time: roomDate } });
        waterPercent.value = response.data;
    } catch (error) {
        ElMessage.error('后端请求失败');
        console.error('请求失败:', error);
    }
};

const GetWaterPie = () => {
    var option;

    option = {
        title: {
            text: '观众人数',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示百分比
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: '50%',
                data: waterPercent.value,
                label: {
                    formatter: '{b}: {d}%' // 显示百分比
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    option && waterPie.setOption(option);
}

onMounted(() => {
    initChart();
    fetchWaterPercent(props.room_id, props.analyzed_date);
    fetchRowDataList(props.room_id, props.analyzed_date);
})


// 监听父组件传递的参数变化
watch(() => props.analyzed_date, (newDate) => {
    if (newDate) {
        fetchWaterPercent(props.room_id, newDate);
        fetchRowDataList(props.room_id, newDate);
    }
});

watch(waterPercent, (newWaterPercentData) => {
    if (newWaterPercentData) {
        GetWaterPie();
    }
});

</script>

<style scoped lang="scss"></style>